<template>
	<view class="container">
		<top-back-navbar position="fixed" title="银行绑卡" background="#6A41EA" color="#ffff"></top-back-navbar>
		<view class="content">
			<radio-group>
				<label class="list" v-for="item in list" :key="item.id">
					<view class="title">
						<text class="realname" v-cloak>{{item.bankname}}</text>
						<view class="is-mr">
							<text v-if="item.is_default==1" class="is-mr-btm">默认</text>
						</view>
					</view>
					<view class="text" v-cloak>{{item.idcard_no}}</view>
					<view class="cont">
						<view class="radio-inline" :data-id="item.id" @click.stop="shezhi(item)">
							<radio :value="item.id" :checked="item.is_default==1?true:false" color="#c5000b" />
							<text>设为默认</text>
						</view>
						<view class="pull-right">
							<view class="pull-right-edit" @click.stop="jump(item)" :data-id="item.id">编辑</view>
							<view class="pull-right-del" @click.stop='del(item)' :data-id="item.id">删除</view>
						</view>
					</view>
				</label>
			</radio-group>
			<view style="padding: 80rpx 30rpx;" class="u-f-ajc">
				<button type="primary" style="background-color: #6A41EA; width:100%;border-radius: 60rpx;"
					@click="$u.route(`/pages/member/bankcard/bankcard`)">新增</button>
			</view>
		</view>
		<cxsytabbars :current="3"></cxsytabbars>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankname: '',
				acc_no: '',
				bankpeople: '',
				openid: '',
				zhihang: '',
				bankcardname: '',
				bankcard: '',
				idcard: '',
				telephone: '',
				name: '',
				loading: false,
				alipayimg: '',
				wechatimg: '',
				list:[]
			};
		},
		onLoad: function() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {

					this.openid = res.data
					this.setajax()
					// console.log(this.openid)
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		methods: {
			setajax() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.my_bank_list&app=1',
					method: 'GET',
					data: {
						openid: this.openid,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						
						if (res.statusCode == 200) {
						  let list=Array.isArray(res.data.bank_list)?res.data.bank_list:[];
						  list.forEach(item => {
						    item.idcard_no=item.bankid.substring(0,4)+'****'+item.bankid.substring(item.bankid.length-4)
						  })
						  this.list=list;
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			shezhi(item) {
				if(item.is_default == 1){
					return this.$u.toast('设置重复')
				}
			  uni.showModal({
			    content: `确定设置${item.idcard_no}为默认银行卡吗？`,
			    success: async (res) => {
			      if (res.confirm) {
			        let res2 = await this.$myRequest({
			          url: `/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.bank_default&app=1`,
			          data: {
			            openid: this.openid,
			            id: item.id,
			          }
			        })
					if(res2.data.error == 0){
						this.$u.toast(res2.data.message)
						this.setajax()
					}else{
						this.$u.toast(res2.data.message)
					}
			      }
			    }
			  })
			},
			jump(item) {
				this.$u.route(`/pages/member/bankcard/bankcard?id=${item.id}`)
			},
			del(item,index) {
				uni.showModal({
				  content: `确定继续此操作吗？`,
				  success: async (res) => {
				    if (res.confirm) {
				      let res2 = await this.$myRequest({
				        url: `/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.del_my_bank&app=1`,
				        data: {
						  openid: this.openid,
				          id: item.id,
				        }
				      })
					  if(res2.data.error == 0){
						  this.setajax()
					  }
				      this.$u.toast(res2.data.message)
					  
				    }
				  }
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f2f5fa;
	}

	.container {
		;
	}

	.navbar {
		width: 100%;
		padding: 140rpx 0 0;

		image {
			width: 80%;
		}
	}

	.content{
		padding:30rpx;
	}
	
	.list {
		padding: 0;
		display: block;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
		margin-bottom: 20rpx;
		padding:30rpx;
		.title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.realname,.mobile{
				font-size: 32rpx;
				font-weight: 600;
			}
			.is-mr{
				min-height: 10rpx;
				.is-mr-btm{
					padding:0 20rpx;
					font-size: 24rpx;
					color:#fff;
					border-radius: 30rpx;
					background-color: #c5000b;
				}
			}
		}
		.text {
			font-size: 28upx;
			color: #888;
			margin-top:4rpx;
		}
	}
	
	.cont {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top:20rpx;
		border-top:1px solid #f2f5fa;
		margin-top:20rpx;
		.radio-inline{
			display: flex;
			align-items: center;
			justify-content: center;
			radio{
				transform: scale(0.7,0.7);
			}
			text{
				color: #888;
				font-size: 26upx;
				margin-left: 10rpx;
			}
		}
		.pull-right{
			display: flex;
			align-items: center;
			view{
				padding:0 40rpx;
				font-size: 28rpx;
				border-radius: 30rpx;
			}
			.pull-right-edit{
				color:#666;
				border:1px solid #666;
				margin-right: 20rpx;
			}
			.pull-right-del{
				color:#c5000b;
				border:1px solid #c5000b;
			}
		}
	}
</style>
